<template>
  <!--转供策略-->
  <el-row style="float:right">
    <div class="btn-czp" @click="generateCzp">生成操作票</div>
  </el-row>
  <el-table :data="actions"
            style="width: 100%;--el-table-border-color: none;"
            :row-class-name="getClassName"
            :header-cell-style="customHeaderCell"
            :cell-style="customCell"
  >
    <el-table-column type="index" label="序号" align="center" width="80"/>
    <el-table-column prop="level" align="center" label="电网层级"/>
    <el-table-column prop="switch" align="center" label="动作元件">
      <template #default="scope ">
        {{scope.row.switch}}开关
      </template>
    </el-table-column>
    <el-table-column prop="vn_kv" align="center" width="160" label="电压等级(kV)"/>
    <el-table-column prop="operatingUnit" align="center" label="操作单位"/>
    <el-table-column prop="switchAction" align="center" label="开关动作">
      <template #default="scope">
        {{scope.row.act === 1 ? '合上' : '打开'}}{{scope.row.switch}}开关
      </template>
    </el-table-column>
    <el-table-column prop="act_type" align="center" weith="120" label="动作类型"/>
  </el-table>
</template>

<script setup>

const props = defineProps({
  actionData:Object,
})
// 解构获取页面数据
const {actions,czp} = props.actionData;
console.log(czp)


const customHeaderCell = {
  color: '#fff',
  backgroundColor: "#2f4352",
  padding: '10px 0',
  fontSize:'14px',
  border:'1px solid #507e9c'
}

const customCell = {
  color: '#fff',
  // backgroundColor: "#24333c",
  padding: '6px 0',
  fontSize:'12px',
  border:'1px solid #507e9c'
}

const getClassName = ({rowIndex}) =>{
  return rowIndex%2 === 0? 'odd-row' : 'even-row'

}

// 生成操作票
const generateCzp = ()=>{
  // 将操作票参数传到父级
  window.parent.postMessage(JSON.stringify(props.actionData.czp),'*')
}
</script>

<style scoped lang="scss">
@import "@/assets/styles/el-table.scss";
.btn-czp {
  padding: 12px 20px;
  color:#07d5c0;
  font-size: 14px;
  font-weight: 600;
  border: 2px #07d5c0 solid;
  border-radius: 5px;
  margin-bottom: 16px;
  cursor: pointer;
}
.btn-czp:hover {
  color: #fff;
  background-color: #07d5c0;
}

</style>
